<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="true" %>
<%@ page import="javax.portlet.*"%>
<%@ page import="pits.dto.EmployeeDTO" %>
<%@ page import="pits.dto.EditCourseInfoDTO" %>
<%@ page import="pits.dao.EditCourseInfoDAO" %>

<portlet:defineObjects />

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PITS - Course Profile</title>
	<link type="text/css" href='<%=renderRequest.getContextPath() + "/jquery/themes/base/ui.all.css" %>' rel="stylesheet" />
	
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/jquery-1.3.2.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/ui.core.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/ui.tabs.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/ui.datepicker.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/ui.draggable.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/ui.resizable.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/ui.dialog.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/effects.core.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/ui/effects.highlight.js" %>' ></script>
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/jquery/external/bgiframe/jquery.bgiframe.js" %>' ></script>
	
	<link type="text/css" href='<%=renderRequest.getContextPath() + "/jquery/demos.css" %>' rel="stylesheet" />

	<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
	

	$(function() {
			$("#creationdte").datepicker();
	});
	
	
	</script>
	
	<script type="text/javascript">
	/**
	 * Display dialog of error messages 
	 */
	$(function() {
		$("#dialogmsg").dialog({
			bgiframe: true,
			autoOpen: false,
			modal: true,
			buttons: {
				Ok: function() {
					$(this).dialog('close');
				}
			}
		});
	});

	/**
	 * Display dialog of info messages 
	 */
	$(function() {
		$("#dialoginfo").dialog({
			bgiframe: true,
			autoOpen: false,
			modal: true,
			buttons: {
				Ok: function() {
					$(this).dialog('close');
				}
			}
		});
	});

	/**
	 * Lookup Organization Code dialog 
	 */
	$(function() {
			var searchCond = $("#searchCond");
				var allFields = $([]).add(searchCond);
				
		$("#dlg-lookup-org-code").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 300,
			modal: true,
			buttons: {
				'Select': function() {
					var bValid = true;
					//allFields.removeClass('ui-state-error');

					//bValid = bValid && checkLength(searchCond,"searchCond",1,16);
					
					if (bValid) {
						$('#organization').val("FSOFT HCM");
						$(this).dialog('close');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
	});
		
			
	$(function() {
		var name = $("#name");
		var organization = $("#organization");
		var description = $("#description");
		var allFields = $([]).add(name).add(organization).add(description);
		var tips = $("#validateTips");

		function updateTips(t) {
			tips.text(t).effect("highlight",{},1500);
		}

		/**
		 * @param o ui component
		 * @param n component name
		 * @min
		 * @max
		 */
		function checkLength(o,n,min,max) {

			if ( o.val().length > max || o.val().length < min ) {
				o.addClass('ui-state-error');
				updateTips("Length of " + n + " must be between " + min + " and " + max +".");
				return false;
			} else {
				return true;
			}

		}

		function checkRegexp(o,regexp,n) {

			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass('ui-state-error');
				updateTips(n);
				return false;
			} else {
				return true;
			}

		}
		
		
		$('#lookup-org-code').click(function() {
			$('#dlg-lookup-org-code').dialog('open');
			return false;
		})
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active"); 
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});


		$("#save").click(function() {
			var bValid = true;
			allFields.removeClass('ui-state-error');
			
			// data validation
			bValid = bValid && checkLength(name,"name",1,60);
			bValid = bValid && checkLength(description,"description",1,200);
			
			if (bValid) {
				$('#dialoginfo').dialog('open');
			} else {
				$('#dialogmsg').dialog('open');
			}

			submitForm('<portlet:namespace/>','editCourseInfoForm','updateCourseInfo');
			return bValid;
		});

		$("#cancel").click(function() {
			submitForm('<portlet:namespace/>','editCourseInfoForm','cancel');
		});
		
	});
	</script>
	
	<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/js/calendarDateInput.js" %>'></script>
	
	<script type="text/javascript">
		var comSelected;
		var existedLangList = "";
		var existedAppList = "";
		var existedTechList = "";
		var existedFrameList = "";
	
		function isIn(container, str, splitter) {
			var arr = container.split(splitter);
			for (i = 0; i < arr.length; i++) {
				if (arr[i] == str) return true;
			}
			return false; 
		}
		
		function getForm(namespace, name) {
			return document.forms[namespace + name];
		}
	 
		function submitForm(namespace, name, action) {
			var frm = getForm(namespace, name);
			frm.txtAction.value = action;
			frm.submitLink.value = "EditCourseInfo.jsp";

			if (name != "myForm") {
				if (document.getElementById('dep' + comSelected).value == 'Other') {
					frm.department.value = ":" + frm.otherDepartment.value;
				}
				else {
					frm.department.value = document.getElementById('dep' + comSelected).value;
				}
			}
			
			frm.submit();
		}
	</script>

</head>
<body>
<form name="<portlet:namespace/>myForm" action="<portlet:actionURL/>" method="POST">
<input type="hidden" name="txtAction"/>
<input type="hidden" name="submitLink"/>
<p align="right">
	You are logging in as 
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'getEmployeeInfo')"><b>${sessionScope.userName}</b></a>
	! &nbsp;
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'home')">Home</a>
	| &nbsp;
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'logout')">Logout</a>
</p>
</form>
<form  name="<portlet:namespace/>editCourseInfoForm" action="<portlet:actionURL/>" method="POST">

<input type="hidden" name="txtAction"/>
<input type="hidden" name="submitLink"/>
<%
EditCourseInfoDTO courseInfo = new EditCourseInfoDAO().getData("" + session.getAttribute("courseID"));
%>

<div class="demo">
	<h2 class="title">Course Profile</h2>
	<img src='<%=renderRequest.getContextPath() + "/img/HCMUTLogo.jpg" %>' ></img>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">General Information</a></li>
			<li><a href="#tabs-2">Technology Information</a></li>
		</ul>
	
		<div id="tabs-1">
			<table>
			<tr>	
				<td>
					<table border="1" width="100%">							
						<tr>
							<td align="left" valign="bottom">&nbsp;Name(<font color="#FF0000">*</font>)&nbsp;</td>
							<td align="left" valign="middle" colspan="2">
								<input type="text" name="courseName" id="name" class="text ui-widget-content ui-corner-all" size="60" value='<%=courseInfo.getCourseName() %>'/>
							</td>
						</tr>
						
						<tr>
							<td align="left" valign="bottom">&nbsp;Description&nbsp;</td>
							<td align="left" valign="middle" colspan="2">
							<textarea name="description" id="description" rows="2" cols="51"><%=courseInfo.getDescription() %></textarea></td>
						</tr>
						<tr>
							<td align="left" valign="middle">&nbsp;Organization&nbsp;</td>
							
							<td align="left" valign="middle">
								<select name="companyID" id="comSelect" onchange="
									for (k = 0; k < '<%=courseInfo.getCompanyNames().size() %>'; k++) {
										document.getElementById(k).style.display='none';
									}
									document.getElementById(this.selectedIndex).style.display = 'inline';
									comSelected = this.selectedIndex;
									document.getElementById('dep' + this.selectedIndex).selectedIndex = 0;
									this.form.otherDepartment.style.visibility = 'hidden';
								">
								<%
								for (int i = 0; i < courseInfo.getCompanyNames().size(); i++) {
								%>
									<option value=<%=courseInfo.getCompanyIDs().get(i).intValue() %> ><%=courseInfo.getCompanyNames().get(i) %></option>
								<%
								}
								%>
								</select>
								<script type="text/javascript">
									for (i = 0; i < document.getElementById('comSelect').length; i++) {
										if (document.getElementById('comSelect').options[i].value == <%=courseInfo.getCurrentComID() %>) {
											document.getElementById('comSelect').selectedIndex = i;
											comSelected = i;
											break;
										}
									}
								</script>
							</td>
							
							<td colspan="2" align="left" valign="middle">Department
								<input type="hidden" name="department" />
								<%
								for (int i = 0; i < courseInfo.getCompanyNames().size(); i++) {
									String dis = new String("none");
									if (i == 0) dis = "none";
								%>
									<div id='<%=i %>' style='<%="position:relative; display:" + dis %>'>
									<select id='<%="dep" + i %>' onchange="
										if(this.value=='Other'){
											this.form.otherDepartment.style.visibility='visible';
											this.form.otherDepartment.focus();
										}
										else{this.form.otherDepartment.style.visibility='hidden';}
									">
								<%
									for (int j = 0; j < courseInfo.getDepartNames().get(i).size(); j++) {
								%>
										<option value=<%=courseInfo.getDepartIDs().get(i).get(j) %> ><%=courseInfo.getDepartNames().get(i).get(j) %></option>
								<%
									}
								%>
										<option value="Other">Other</option>
									</select>
									</div>
								<%}%>
								<script type="text/javascript">
									comSelected = document.getElementById('comSelect').selectedIndex;
									for (k = 0; k < <%=courseInfo.getCompanyNames().size() %>; k++) {
										document.getElementById(k).style.display='none';
									}
									document.getElementById(comSelected).style.display = 'inline';
									for (m = 0; m < document.getElementById('dep' + comSelected).length; m++) {
										if (document.getElementById('dep' + comSelected).options[m].value == <%=courseInfo.getCurrentDepartID() %>) {
											document.getElementById('dep' + comSelected).selectedIndex = m;
											break;
										}
									}
								</script>
								
								<input name="otherDepartment" type="text" style="visibility:hidden" />
							</td>
						</tr>
						
						<tr>
							<td align="left" valign="bottom">&nbsp;Creation date</td>
							<td align="left" valign="middle" colspan="2">
								<script>DateInput('dateIssused', true, 'DD/MM/YYYY', '<%= request.getContextPath() %>', '<%=courseInfo.getDateIssused() %>');</script>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2">&nbsp;</td>
			</tr>
			</table>
		</div> <!-- tab1.END -->
	
		<div id="tabs-2">
		
			<table border="1">
				<tr>
					<td align="left" valign="bottom">&nbsp;Language&nbsp;</td>
					<td align="left" valign="bottom">
						<input type="hidden" name="language" value='<%=courseInfo.getCurrentLangID() %>' />
						<textarea name="txtLanguage" ><%=courseInfo.getCurrentLangName() %></textarea>
					</td>
					<td align="left" valign="bottom">
						<select name="selectLanguage" onchange="
							if(this.value=='Other'){
								this.form.otherLanguage.style.visibility='visible';
								this.form.otherLanguage.focus();
							}
							else{
								this.form.otherLanguage.style.visibility='hidden';
							}
						">
						<%
						for (int i = 0; i < courseInfo.getLangNames().size(); i++) {
						%>
							<option value='<%=courseInfo.getLangIDs().get(i) %>'><%=courseInfo.getLangNames().get(i) %></option>
						<%
						}
						%>
							<option value="Other">Other</option>
						</select>
						
						<%for (int i = 0; i < courseInfo.getLangNames().size(); i++) {%>
						<script type="text/javascript">
							existedLangList += ", " + "<%=courseInfo.getLangNames().get(i) %>";
						</script>
						<%}%>
						<script type="text/javascript">
							existedLangList = existedLangList.substr(2);
						</script>
						
						<input name="otherLanguage" type="text" style="visibility:hidden" />
					</td>
					<td align="left" valign="bottom">
						<input name="addLanguage" type="button" value="Add" onclick="
							if(this.form.selectLanguage.value!='Other'){
								if(this.form.language.value==''){
									this.form.language.value = this.form.selectLanguage.value;
									this.form.txtLanguage.value = this.form.selectLanguage.options[this.form.selectLanguage.selectedIndex].text;
								}
								else if (!isIn(this.form.language.value, this.form.selectLanguage.value, ':')) {
									this.form.language.value += ':' + this.form.selectLanguage.value;
									this.form.txtLanguage.value += ', ' + this.form.selectLanguage.options[this.form.selectLanguage.selectedIndex].text;
								}
							}
							else if (!isIn(existedLangList, this.form.otherLanguage.value, ', ')) {
								if(this.form.language.value==''){
									this.form.language.value = this.form.otherLanguage.value;
									this.form.txtLanguage.value = this.form.otherLanguage.value;
								}
								else if (!isIn(this.form.txtLanguage.value, this.form.otherLanguage.value, ', ')) {
									this.form.language.value += ':' + this.form.otherLanguage.value;
									this.form.txtLanguage.value += ', ' + this.form.otherLanguage.value;
								}
							}
						"/>
					</td>
				</tr>
				<tr>
					<td align="left" valign="bottom">&nbsp;Type of Application &nbsp;</td>
					<td align="left" valign="bottom">
						<input type="hidden" name="application" value='<%=courseInfo.getCurrentAppID() %>' />
						<textarea name="txtApp" ><%=courseInfo.getCurrentAppName() %></textarea>
					</td>
					<td align="left" valign="bottom">	
						<select name="selectApp" onchange="
							if(this.value=='Other'){
								this.form.otherApp.style.visibility='visible';
								this.form.otherApp.focus();
							}
							else{this.form.otherApp.style.visibility='hidden';}
						">
							<%
							for (int i = 0; i < courseInfo.getAppNames().size(); i++) {
							%>
								<option value='<%=courseInfo.getAppIDs().get(i) %>'><%=courseInfo.getAppNames().get(i) %></option>
							<%
							}
							%>
							<option value="Other">Other Application</option>
						</select>
						
						<%for (int i = 0; i < courseInfo.getAppNames().size(); i++) {%>
						<script type="text/javascript">
							existedAppList += ", " + "<%=courseInfo.getAppNames().get(i) %>";
						</script>
						<%}%>
						<script type="text/javascript">
							existedAppList = existedAppList.substr(2);
						</script>
						
						<input name="otherApp" type="text" style="visibility:hidden" />
					</td>
					<td align="left" valign="bottom">
						<input name="addApp" type="button" value="Add" onclick="
							if(this.form.selectApp.value!='Other'){
								if(this.form.application.value==''){
									this.form.application.value = this.form.selectApp.value;
									this.form.txtApp.value = this.form.selectApp.options[this.form.selectApp.selectedIndex].text;
								}
								else if (!isIn(this.form.application.value, this.form.selectApp.value, ':')) {
									this.form.application.value += ':' + this.form.selectApp.value;
									this.form.txtApp.value += ', ' + this.form.selectApp.options[this.form.selectApp.selectedIndex].text;
								}
							}
							else if (!isIn(existedAppList, this.form.otherApp.value, ', ')) {
								if(this.form.application.value==''){
									this.form.application.value = this.form.otherApp.value;
									this.form.txtApp.value = this.form.otherApp.value;
								}
								else if (!isIn(this.form.txtApp.value, this.form.otherApp.value, ', ')) {
									this.form.application.value += ':' + this.form.otherApp.value;
									this.form.txtApp.value += ', ' + this.form.otherApp.value;
								}
							}
						"/>
					</td>
				</tr>
				<tr>
					<td align="left" valign="bottom">&nbsp;Kind of Technology&nbsp;</td>
					<td align="left" valign="bottom">
						<input type="hidden" name="technology" value='<%=courseInfo.getCurrentTechID() %>' />
						<textarea name="txtTech"><%=courseInfo.getCurrentTechName() %></textarea>
					</td>
					<td align="left" valign="bottom">
						<select name="selectTech" onchange="
							if(this.value=='Other'){
								this.form.otherTech.style.visibility='visible';
								this.form.otherTech.focus();
							}
							else{this.form.otherTech.style.visibility='hidden';}
						">
							<%
							for (int i = 0; i < courseInfo.getTechNames().size(); i++) {
							%>
								<option value='<%=courseInfo.getTechIDs().get(i) %>'><%=courseInfo.getTechNames().get(i) %></option>
							<%
							}
							%>
							<option value="Other">Other</option>
						</select>
						
						<%for (int i = 0; i < courseInfo.getTechNames().size(); i++) {%>
						<script type="text/javascript">
							existedTechList += ", " + "<%=courseInfo.getTechNames().get(i) %>";
						</script>
						<%}%>
						<script type="text/javascript">
							existedTechList = existedTechList.substr(2);
						</script>
						
						<input name="otherTech" type="text" style="visibility:hidden" />
					</td>
					<td align="left" valign="bottom">
						<input name="addTech" type="button" value="Add" onclick="
							if(this.form.selectTech.value!='Other'){
								if(this.form.technology.value==''){
									this.form.technology.value = this.form.selectTech.value;
									this.form.txtTech.value = this.form.selectTech.options[this.form.selectTech.selectedIndex].text;
								}
								else if (!isIn(this.form.technology.value, this.form.selectTech.value, ':')) {
									this.form.technology.value += ':' + this.form.selectTech.value;
									this.form.txtTech.value += ', ' + this.form.selectTech.options[this.form.selectTech.selectedIndex].text;
								}
							}
							else if (!isIn(existedTechList, this.form.otherTech.value, ', ')) {
								if(this.form.technology.value==''){
									this.form.technology.value = this.form.otherTech.value;
									this.form.txtTech.value = this.form.otherTech.value;
								}
								else if (!isIn(this.form.txtTech.value, this.form.otherTech.value, ', ')) {
									this.form.technology.value += ':' + this.form.otherTech.value;
									this.form.txtTech.value += ', ' + this.form.otherTech.value;
								}
							}
						"/>
					</td>
				</tr>
				<tr>
					<td align="left" valign="bottom">&nbsp;Kind of Framework &nbsp;</td>
					<td align="left" valign="bottom">
						<input type="hidden" name="framework" value='<%=courseInfo.getCurrentFrameID() %>' />
						<textarea name="txtFrame"><%=courseInfo.getCurrentFrameName() %></textarea>
					</td>
					<td align="left" valign="bottom">
						<input type="hidden" name="frwkKind" />
						<select name="selectFrame" onchange="
							if(this.value=='Other'){
								this.form.otherFrame.style.visibility='visible';
								this.form.otherFrame.focus();
							}
							else{this.form.otherFrame.style.visibility='hidden';}
						">
							<%
							for (int i = 0; i < courseInfo.getFrameNames().size(); i++) {
							%>
								<option value='<%=courseInfo.getFrameIDs().get(i) %>'><%=courseInfo.getFrameNames().get(i) %></option>
							<%
							}
							%>
							<option value="Other">Other</option>
						</select>
						
						<%for (int i = 0; i < courseInfo.getFrameNames().size(); i++) {%>
						<script type="text/javascript">
							existedFrameList += ", " + "<%=courseInfo.getFrameNames().get(i) %>";
						</script>
						<%}%>
						<script type="text/javascript">
							existedFrameList = existedFrameList.substr(2);
						</script>
						
						<input name="otherFrame" type="text" style="visibility:hidden" />
					</td>
					<td align="left" valign="bottom">
						<input name="addFrame" type="button" value="Add" onclick="
							if(this.form.selectFrame.value!='Other'){
								if(this.form.framework.value==''){
									this.form.framework.value = this.form.selectFrame.value;
									this.form.txtFrame.value = this.form.selectFrame.options[this.form.selectFrame.selectedIndex].text;
								}
								else if (!isIn(this.form.framework.value, this.form.selectFrame.value, ':')) {
									this.form.framework.value += ':' + this.form.selectFrame.value;
									this.form.txtFrame.value += ', ' + this.form.selectFrame.options[this.form.selectFrame.selectedIndex].text;
								}
							}
							else if (!isIn(existedFrameList, this.form.otherFrame.value, ', ')) {
								if(this.form.framework.value==''){
									this.form.framework.value = this.form.otherFrame.value;
									this.form.txtFrame.value = this.form.otherFrame.value;
								}
								else if (!isIn(this.form.txtFrame.value, this.form.otherFrame.value, ', ')) {
									this.form.framework.value += ':' + this.form.otherFrame.value;
									this.form.txtFrame.value += ', ' + this.form.otherFrame.value;
								}
							}
						"/>
					</td>
				</tr>
			</table>
		</div> <!-- tab1.END -->
		
	</div> <!-- tabs.END -->
	
<!--	<div class="demo-description">-->
<!--		<input type="button" value="Save" id="save" onclick="-->
<!--			-->
<!--		" />-->
<!--		<input type="button" value="Cancel" id="cancel" onclick="-->
<!--			submitForm('<portlet:namespace/>','editCourseInfoForm','home')-->
<!--		"/>-->
<!--	</div>-->
	
	<div class="demo-description">
		<%
		if (session.getAttribute("roles").equals("admin")) {
		%>
		<button id="save">Save</button>
		&nbsp;
		<%
		}
		%>
		<button id="cancel" >Cancel</button>
	</div>
	
	<!-- -->
	<div id="dialogmsg" title="Error Message">
		<p id="validateTips"></p>
	</div>
	
	<!-- -->
	<div id="dialoginfo" title="Info Message">
		<p>
			<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
			The course is saved successfully!.
		</p>
	</div>
	
	<!-- Lookup Organization Code dialog -->
	<!-- div id="dlg-lookup-org-code" title="Lookup Organization Code">
		<p id="dlg-lookup-org-code-validateTips"></p>
		<input type="text" name="searchCond" id="searchCond" class="text ui-widget-content ui-corner-all" />
		<button id="search">Search</button>
		
		<table border="1" width="100%" id="table1" cellspacing="0" cellpadding="0">
			<tr>
				<td width="64" bgcolor="#6699FF">Select</td>
				<td width="128" bgcolor="#6699FF">Category</td>
				<td width="182" bgcolor="#6699FF">Sub Category</td>
			</tr>
			<tr>
				<td width="64" align="center">
				<input type="radio" name="C1" value="ON"></td>
				<td width="128">
				FSOFT</td>
				<td width="182">FSOFT HCM</td>
			</tr>
			<tr>
				<td width="64" align="center">
				<input type="radio" name="C2" value="ON"></td>
				<td width="128">
				FSOFT</td>
				<td width="182">
				FJP</td>
			</tr>
		</table>
	</div-->

</div>
<p><!-- End demo --></p>

</form>
</body>
</html>